<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    :title="title"
    :width="modalWidth"
    :height="600"
    @ok="handleSubmit"
    @cancel="onCloseEvent"
    :enableComment="enableComment"
    wrapClassName="jeecg-online-modal"
  >
    <template #footer>
      <template v-for="(item, index) in cgButtonList" :key="item.id">
        <a-button
          @click="handleCgButtonClick(btn.optType, btn.buttonCode)"
          type="primary"
          :preIcon="item.buttonIcon ? 'ant-design:' + item.buttonIcon : ''"
        >
          {{ item.buttonName }}
        </a-button>
      </template>
      <a-button v-if="!disableSubmit" type="primary" @click="handleSubmit" :loading="submitLoading">确定</a-button>
      <a-button @click="handleCancel">关闭</a-button>
    </template>
    <template #comment> <comment-panel ref="commentPanelRef" :tableName="tableName" :dataId="formDataId" /></template>
    <template #default>
      <online-form
        ref="onlineFormCompRef"
        :id="id"
        :disabled="disableSubmit"
        :form-template="formTemplate"
        :isTree="isTreeForm"
        :pidField="pidFieldName"
        @rendered="renderSuccess"
        @success="handleSuccess"
      />
    </template>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref, watch } from 'vue';
  import { BasicModal } from '/@/components/Modal';
  import OnlineForm from '../comp/OnlineForm.vue';
  import { useAutoModal } from '../../use/useAutoForm';
  import CommentPanel from '/@/components/jeecg/comment/CommentPanel.vue';

  export default defineComponent({
    name: 'OnlineModal',
    components: {
      BasicModal,
      OnlineForm,
      CommentPanel,
    },
    props: {
      id: {
        type: String,
        default: '',
      },
    },
    emits: ['success', 'register', 'formConfig'],
    setup(props, { emit }) {
      console.log('进入表单弹框》》》》modal');
      const commentPanelRef = ref();
      function reloadComment() {
        if (commentPanelRef.value) commentPanelRef.value.reload();
      }
      const {
        title,
        modalWidth,
        registerModal,
        closeModal,
        cgButtonList,
        handleCgButtonClick,
        disableSubmit,
        handleSubmit,
        submitLoading,
        handleCancel,
        handleFormConfig,
        onlineFormCompRef,
        formTemplate,
        isTreeForm,
        pidFieldName,
        renderSuccess,
        formRendered,
        tableName,
        formDataId,
        enableComment,
        onCloseEvent,
      } = useAutoModal(false, { emit }, reloadComment);
      function handleSuccess(formData) {
        emit('success', formData);
        closeModal();
        onCloseEvent();
      }
      watch(() => props.id, renderFormItems, { immediate: true });
      async function renderFormItems() {
        formRendered.value = false;
        if (!props.id) {
          return;
        }
        console.log('重新渲染表单》》》》modal');
        await handleFormConfig(props.id, {});
      }
      const that = {
        title,
        onlineFormCompRef,
        renderSuccess,
        registerModal,
        handleSubmit,
        handleSuccess,
        handleCancel,
        modalWidth,
        formTemplate,
        disableSubmit,
        cgButtonList,
        handleCgButtonClick,
        isTreeForm,
        pidFieldName,
        submitLoading,
        tableName,
        formDataId,
        enableComment,
        commentPanelRef,
        onCloseEvent,
      };
      return that;
    },
  });
</script>
<style scoped></style>
